<template>
  <div class="menu">
    <div class="seach-box">
      <van-search
        v-model="srachValue"
        shape="round"
        placeholder="请输入搜索关键词"
         @input="isShow(srachValue)"
        @search="search(srachValue)"
      />
    </div>
    <div class="menu-box">
      <div class="menu-list">
        <div
          class="menu-list-item"
          :class="{ active: activeIndex == index }"
          v-for="(item, index) in menuList"
          :key="index"
          @click="toggleMenuList(index,item.type)"
        >
          {{ item.typeDesc }}
        </div>
      </div>
      <div class="menu-content" v-if="isOpen===0">
        <div class="menu-products">
          <div class="menu-pro" v-for="(item, index) in Products" :key="index" @click="viewsDetail(item.pid)">
            <product :pro="item"></product>
          </div>
        </div>
      </div>
      <div class="menu-content" v-if="isOpen===1">
        <div class="menu-products">
          <div class="menu-pro" v-for="(item, index) in AllSearchData" :key="index" @click="viewsDetail(item.pid)">
            <product :pro="item"></product>
          </div>
        </div>
      </div>
      <div class="menu-content" v-if="isOpen===2">
       <van-empty description="没有找到相关商品!" />
      </div>
    </div>
  </div>
</template>

<script>
import Product from "@/components/Product.vue";
export default {
  name: "Menu",

  data() {
    return {
      srachValue: "",
      activeIndex: 0,
      menuList: [],
      Products: [],
      isOpen:0,
      //搜索
      AllSearchData:[]
    };
  },
  components: {
    Product,
  },
  created() {
    this.getProductType();
  },
  methods: {
    //获取商品类型
    getProductType() {
      //如果是get请求,参数需要写在params字段,如果是post请求,需要把参数写的data字段里面
      this.axios({
        method: "get",
        url: "/type",
      })
        .then((res) => {
          // console.log(res);
          if (res.data.code === 400) {
            res.data.result.unshift({
              type: "isHot",
              typeDesc: "热卖推荐",
            });
            this.menuList = res.data.result;

            //根据商品类型获取商品数据
            this.getProductByType(res.data.result[this.activeIndex].type);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //获取根据商品类型获取商品数据
    getProductByType(type) {
      //type;商品类型
      let key = "";
      let value = "";

      if (type === "isHot") {
        key = "isHot";
        value = 1;
      } else {
        key = "type";
        value = type;
      }
      //如果是get请求,参数需要写在params字段,如果是post请求,需要把参数写的data字段里面
      this.axios({
        method: "get",
        url: "/typeProducts",
        params: {
          key,
          value,
        },
      })
        .then((res) => {
          // console.log(res);
          if (res.data.code == 500) {
            this.Products = res.data.result;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //切换类型列表
    toggleMenuList(index,type) {
      if (this.activeIndex === index) {
        return;
      }
      this.activeIndex = index;

      //根据商品类型获取商品数据
      this.getProductByType(type);
    },

    //点击查看详情页面
    viewsDetail(pid){
        // console.log(pid);
        this.$router.push({name: 'Detail', query: {pid}});
    },

    //判断
    isShow(val){
      if(val.length===0){
        this.isOpen = 0
      }
    },
    //搜索商品
    search(sr){
      this.isOpen = false;
      this.axios({
        method:'get',
        url:'/search',
        params:{
          name:sr
        },
      }).then(res=>{
        // console.log(res);
        if(res.data.code==="Q001" && res.data.result.length !=0){
          this.AllSearchData = res.data.result;
          this.isOpen=1;
        }else if(res.data.code==="Q001" && res.data.result.length ===0){
          this.isOpen=2;
        }
      }).catch(err=>{
        console.log(err);
      })
    }
  },
};
</script>

<style lang="less" scoped>
.menu-pro {
  width: calc(~"50% - 5px");
  margin-right: 10px;
  margin-bottom: 10px;
  &:nth-child(2n) {
    margin-right: 0;
  }
}
// 产品区
.menu-products {
  display: flex;
  flex-wrap: wrap;
}
// 搜索框
.seach-box {
  position: sticky;
  top: 0;
}
// 内容区
.menu-box {
  position: fixed;
  top: 54px;
  right: 0;
  left: 0;
  bottom: 50px;
  display: flex;
}
// 饮品导航栏
.menu-list {
  width: 80px;
  height: 100%;
  font-size: 14px;
  overflow-y: auto;
}
// 饮品导航文字
.menu-list-item {
  height: 40px;
  text-align: center;
  line-height: 40px;
}
// 点击高亮
.menu-list-item.active {
  background-color: #ccc;
  color: #0c34ba;
}
//产品大盒子
.menu-content {
  flex: 1;
  height: 100%;
  background-color: #fff;
  padding: 10px;
  box-sizing: border-box;
  overflow-y: auto;
}
</style>